<template>
  <div class="edu-page-warp">
    <condition-card @reset="reset" @search="onSubmit">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item :label="$t('teachers.nationality')">
            <el-select v-model="queryForm.country" filterable style="width: 100%;">
              <el-option v-for="item in options.nationality" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('teachers.faculty')">
            <el-select v-model="queryForm.faculty" filterable style="width: 100%;">
              <el-option v-for="item in options.college" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('teachers.title')">
            <el-select v-model="queryForm.title" filterable style="width: 100%;">
              <el-option v-for="item in options.professional" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </condition-card>
    <el-card shadow="never">
      <div class="edu-page-title" style="margin-bottom: 24px;">{{$t('teachers.outSideTeacherQuery')}}</div>
      <div class="edu-opertion-bar" style="margin-bottom: 16px;">
        <div class="float-left">
          <el-input v-model="queryForm.condition" :placeholder="$t('common.pla.teacherNameCode')"  style="width:200px"
            @keyup.enter.native="onSubmit">
            <i class="el-icon-search" slot="suffix" style="margin-top:10px;cursor:pointer" @click="onSubmit"></i>
          </el-input>
        </div>
        <div class="float-right">
          <el-button type="primary" @click="exportTeacher">{{$t("message.export")}}</el-button>
        </div>
      </div>
      <el-table stripe :data="teachers" size="mini" width="100%" @selection-change="chooseTeacher" tooltip-effect="light">
        <edu-table-column type="selection" width="50"></edu-table-column>
        <edu-table-column :label="$t('message.order')" type="index" align="center" width="60"/>
        <edu-table-column prop="code" :label="$t('teachers.teacherCode')"></edu-table-column>
        <edu-table-column :label="$t('teachers.teacherName')">
          <template slot-scope="props">
            <el-button type="text" @click="openReadDialog(props.row)">{{props.row.name}}</el-button>
          </template>
        </edu-table-column>
        <edu-table-column prop="sexI18n" :label="$t('teachers.gender')"/>
        <edu-table-column :label="$t('teachers.age')">
          <template slot-scope="props">{{formatDate(props.row.age)}}</template>
        </edu-table-column>
        <edu-table-column prop="countryI18n" :label="$t('teachers.nationality')"/>
        <edu-table-column prop="title" :label="$t('teachers.title')"/>
        <edu-table-column prop="facultyI18n" :label="$t('teachers.faculty')"/>
        <edu-table-column :label="$t('teachers.phone')" prop="phone"/>
        <edu-table-column :label="$t('teachers.email')" prop="email"/>
        <edu-table-column :label="$t('teachers.company')" prop="company"/>

       <!-- <edu-table-column :label="$t('courseSummary.applicant')" prop="applyId"/>
        <edu-table-column :label="$t('teachers.applyTime')" prop="createTime"/>
        <edu-table-column :label="$t('culture.scheme.approver')" prop="approvalId"/>
        <edu-table-column :label="$t('progress.auditAt')" prop="updateTime"/>-->
      </el-table>
      <el-row>
        <el-col>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryForm.pageNum_"
            :page-sizes="[20,50,100,500,1000]"
            :page-size="queryForm.pageSize_"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryForm.total_"
            style="float:right;margin-top:10px"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <!--点击名字展示详情弹框-->
    <el-dialog :visible.sync="showReadDialog" class="teacher-info" :close-on-click-modal="false" width="1000px" v-drag-dialog>
      <div slot="title">
        <span style="font-size: 18px">{{$t('teachers.teacherInfo')}}</span>
        <i class="el-icon-warning" style="color: #C0C4CC"></i>
        <span style="font-size: 12px;color: #C0C4CC">{{$t('teachers.changeMessage')}}</span>
      </div>
      <DetailInfoComponent :teacher-info="teacherInfo" :outside="true"></DetailInfoComponent>
    </el-dialog>
  </div>
</template>
<script>
    import {queryDic} from "common/src/api/dictionary";
    import UTILS from "common/src/utils/utils";
    import {
        findTeacherList,
        updateTeacherStatus,
        findRawTeacherById,
        exportTeacher,
        getReportStatus
    } from "common/src/api/resource/teachers";
    import DetailInfoComponent from "./componet/DetailInfoComponent";

    export default {
        name: "outsideSchoolQuery",
        components: {
            DetailInfoComponent
        },
        data() {
            return {
                queryForm: {
                    country: "",
                    faculty: "",
                    title: "",
                    condition: "",
                    approvalStatus: "4",
                    pageNum_: 1,
                    pageSize_: 20,
                    total_: 0,
                    type: 2
                },
                options: {
                    nationality: [],
                    college: [],
                    professional: [],
                    status: []
                },
                showReadDialog: false,
                teachers: [],
                //  readRow: null,
                teacherInfo: null,
                chooseTeachers: []
            };
        },
        mounted: function () {
            this.init();
        },
        methods: {
            init() {
                let yes = {label: this.$t("message.yes"), value: "1"};
                let no = {label: this.$t("message.no"), value: "0"};
                //筛选条件字典查询
                let data = {
                    lang: this.$store.getters.language || "cn",
                    type: "allChild",
                    keys: ["X_YX", "profession", "G_GJQU"]
                };
                queryDic(data).then(res => {
                    if (res.code == 200) {
                        UTILS.fillSelect(
                            {
                                nationality: "G_GJQU",
                                college: "X_YX",
                                professional: "profession"
                            },
                            res.data,
                            this.options
                        );
                    }
                });
                this.onSubmit();
            },
            onSubmit() {
                this.getDataList();
            },
            reset() {
                this.queryForm.condition = "";
                this.queryForm.country = "";
                this.queryForm.faculty = "";
                this.queryForm.title = "";
                this.onSubmit();
            },
            getDataList(isFirstPage = true) {
                if (isFirstPage) {
                    this.queryForm.pageNum_ = 1;
                }
                findTeacherList(this.queryForm).then(res => {
                    if (res.code == 200) {
                        this.teachers = res.data.list;
                        this.queryForm.total_ = res.data.total_;
                    }
                });
            },
            handleSizeChange(val) {
                this.queryForm.pageSize_ = val;
                this.getDataList();
            },
            handleCurrentChange(val) {
                this.queryForm.pageNum_ = val;
                this.getDataList(false);
            },
            openReadDialog(row) {
                this.showReadDialog = true;
                this.teacherInfo = row;
                // this.readRow = row;
            },
            formatDate(date) {
                return date ? date.split(" ")[0] : "";
            },
            chooseTeacher(val) {
                this.chooseTeachers = val;
            },
            exportTeacher() {
                let loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                    background: "rgba(255, 255, 255, .48)"
                });
                let data = _.cloneDeep(this.queryForm);
                data.ids = this.chooseTeachers.map(c => c.id);
                exportTeacher(data).then(res => {
                    if (res.code == 200) {
                        this.delayRequest(res.data.key, loading);
                    } else {
                        loading.close();
                    }
                });
            },
            async delayRequest(key, loading) {
                await new Promise(resolve => setTimeout(resolve, 5000));
                getReportStatus(key)
                    .then(res => {
                        if (res.code == 200 && res.data.status) {
                            loading.close();
                            let path =
                                "/api/baseresservice/teacher/export?path=" +
                                res.data.path;
                            window.open(path);
                        } else {
                            this.delayRequest(key, loading);
                        }
                    })
                    .catch(ex => {
                        this.delayRequest(key, loading);
                    });
            }
        }
    };
</script>
<style lang="scss" scoped>
  .row {
    margin: 15px 0 0 0;
  }
</style>
